<template>
    <div class="todo-container">
        <section class="todoapp">
            <header class="header">
                <h1>备忘录</h1>
                <input class="new-todo"
                autofocus autocomplete="off"
                placeholder="需要做些什么？"
                v-model="ipt"
                @keyup.enter="addTodoList">
            </header>
            <section class="main" v-cloak>
                <input class="toggle-all" type="checkbox" v-model="allDone" @click="allChangeCheck">
                <TodoIpt :todoList="filterTodoList"/>
            </section>
            <footer class="footer" v-show="todoList.length" v-cloak>
                <span class="todo-count">
                    <strong>{{ activeTodoList.length }}</strong> 剩余项
                </span>
                <ul class="filters">
                    <li><a href="javascript:;" @click="handlerVisibility('all')">全部</a></li>
                    <li><a href="javascript:;" @click="handlerVisibility('active')">未完成</a></li>
                    <li><a href="javascript:;" @click="handlerVisibility('completed')">已完成</a></li>
                </ul>
                <button 
                class="clear-completed"
                v-show="todoList.length > activeTodoList.length"
                @click="clearCompleted">
                清除已完成
                </button>
            </footer>
        </section>
        <footer class="info">
        <p>Double-click to edit a todo</p>
        <p>Written by <a href="javascript:;">Evan You</a></p>
        <p>Part of <a href="javascript:;">TodoMVC</a></p>
        </footer>
    </div>
</template>

<script>
import {
  getTodoList,
  setTodoList,
  getAllDone,
  setAllDone
} from "@/utils/localStorageTodo";
import TodoIpt from "@/components/TodoIpt";
export default {
  data() {
    return {
      ipt: "",
      todoList: getTodoList(),
      allDone: getAllDone(),
      visibility: "all",
      filterArr: {
        all: this.all,
        active: this.active,
        completed: this.completed
      }
    };
  },
  methods: {
    clearCompleted() {
      this.todoList = this.active();
    },
    all() {
      return this.todoList;
    },
    active() {
      return this.todoList.filter(v => !v.isCheck);
    },
    completed() {
      return this.todoList.filter(v => v.isCheck);
    },
    addTodoList() {
      // 新增
      if (this.ipt.trim()) {
        this.todoList = [
          {
            text: this.ipt.trim(),
            isCheck: false
          }
        ].concat(this.todoList);
        this.ipt = "";
      }
    },
    parentDoneEdit(item, index) {
      // 完成编辑
      if (!item.text.trim().length) {
        this.parentRemoveTodo(index);
        return;
      } else {
        this.todoList[index].text = item.text.trim();
      }
    },
    parentRemoveTodo(index) {
      // 删除
      this.todoList.splice(index, 1);
    },
    parentChangeCheck(item, index) {
      // 单选
      this.todoList[index] = item;

      let isAllDone = this.todoList.filter(v => {
        return v.isCheck;
      }).length;

      if (isAllDone == this.todoList.length) {
        this.allDone = true;
      } else {
        this.allDone = false;
      }
    },
    allChangeCheck() {
      // 全选
      this.allDone = !this.allDone;

      this.todoList.map(v => {
        v.isCheck = this.allDone;
      });
    },
    handlerVisibility(val) {
        this.visibility = val
    }
  },
  computed: {
    filterTodoList() {
      return this.filterArr[this.visibility]();
    },
    activeTodoList() {
      return this.todoList.filter(v => !v.isCheck);
    }
  },
  watch: {
    todoList: {
      deep: true,
      handler(newVal) {
        setTodoList(newVal);
        if(!newVal.length) {
            this.allDone = false
        }
      }
    },
    allDone: {
      handler(newVal) {
        setAllDone(newVal);
      }
    }
  },
  components: {
    TodoIpt
  }
};
</script>

<style scoped src="../assets/style/todolist.css">
/* @import url('../assets/style/todolist.css');  */
/* vue的style引入css，src和@import的区别？ */
/* @import方式引入css文件作用域是全局，src引入css文件作用域是可以指定局部作用域或者全局作用域 */
</style>

<style scoped>
.todo-container {
  width: 550px;
  height: 258.6px;
  margin: 0 auto;
}

.header > h1 {
  top: -220px;
}
</style>
